<template>
  <div class="state">
    <div class="state-box">
      <div
        class="state-box-item"
        v-for="(item,indxs) in rows"
        :key="indxs"
        @mouseenter="passChange(indxs)"
        @mouseleave="leaveChange(indxs)"
        @click="detailsChange(item.id)"
      >
        <!-- <div class="state-title">
          <div class="state-title-img">
            <img v-show="passNum!=indxs" src="../../images/state-left.png" alt />
            <img v-show="passNum==indxs" src="../../images/state-pass-left.png" alt />
          </div>
          <div
            :class="passNum==indxs? 'state-title-text pass':'state-title-text'"
          >{{ item.publishTime }}</div>
        </div>-->

        <div class="state-content">
          <div class="state-content-img">
            <img :src="item.cover" alt />
          </div>
          <div class="state-title" style="margin-top: 30px;">
            <div
              :class="passNum==indxs? 'state-title-text pass':'state-title-text pass'"
            >{{ item.publishTime }}</div>
          </div>
          <div
            :class="passNum==indxs? 'state-content-title pass':'state-content-title pass'"
          >{{ item.title }}</div>
          <div class="state-content-text">
            {{ item.description }}
            <!-- <p v-html="item.content"></p> -->
          </div>
          <div :class="passNum==indxs? 'state-content-know pass':'state-content-know pass'">了解更多</div>
        </div>
      </div>

      <div class="state-nextp" v-show="total>0">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="nextpChange"
          :total="total"
          :page-size="pageSize"
        ></el-pagination>
        <p>共{{Math.ceil(total/12)}}页</p>
      </div>
    </div>
    <!-- 新闻列表与新闻详情进行显示隐藏 -->
  </div>
</template>
<script>
import { news_list } from "@/utils/api";
export default {
  name: "SzrDynamicState",
  data() {
    return {
      passNum: "-1", //鼠标经过的索引
      rows: [],
      total: 0,
      nextp: 1,
      pageSize:12
      
    };
  },
  created() {
    this.init();
    // console.log('路由信息',this.$route);
  },
  methods: {
    init() {
      news_list({ pageNum: this.nextp, pageSize: this.pageSize }, res => {
        if (res.code === 200) {
          res.rows.forEach((item, indx) => {
            var val = "";
            var dat = [...item.publishTime];
            dat.forEach((item2, index) => {
              if (index == 4) {
                item2 = "年";
              }
              if (index == 5) {
                if (item2 == 0) {
                  item2 = "";
                }
              }
              if (index == 7) {
                item2 = "月";
              }
              if (index == 9) {
                item2 += "日";
              }
              val += item2;
            });
            res.rows[indx].publishTime = val;
          });
          this.rows = res.rows;
          this.total = res.total;
        }
      });
    },
    // 鼠标移入
    passChange(val) {
      this.passNum = val;
      // console.log("鼠标移入");
    },
    // 鼠标移出
    leaveChange() {
      this.passNum = "-1";
      // console.log("鼠标移出");
    },
    // 页码
    nextpChange(val) {
      this.nextp = val;
      this.init();
      // console.log(val);
    },
    //详情
    detailsChange(val) {
      // console.log(val);
      let data = {
        titleNum: 3,
        id: val
      };
      this.$emit("change", data);
    }
  }
};
</script>
<style lang="scss" scoped>
.state {
  max-width: 1920px;
  min-width: 1440px;
  margin: auto;
  margin-top: 80px;
  &-box {
    width: 1400px;
    min-height: calc(100vh - 486px);
    margin: auto;
    background-color: #fff;
    padding: 40px 40px 61px;
    display: flex;
    flex-wrap: wrap;
    &-item {
      width: 310px;
      // height: 500px;
      height: 445px;
      margin-right: 26px;
      margin-bottom: 30px;
      // outline: 1px solid #dddddd;
      background-color: #f5f5f5;
      border-radius: 50px 0 50px 0;
      cursor: pointer;
      padding-top: 10px;
      &:nth-child(4n) {
        margin-right: 0px;
      }
    }
  }
  &-title {
    width: 100%;
    display: flex;
    align-items: start;
    &-img {
      width: 22px;
      height: 37px;
      margin-right: 9px;

      > img {
        width: 100%;
      }
    }
    &-text {
      font-size: 16px;
      color: #999999;
      font-weight: 400;
      margin-top: -5px;
    }
  }
  &-content {
    width: 100%;
    height: 30px;
    padding: 21px 26px 32px 32px;

    &-title {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 20px;
      font-weight: bold;
      color: #000000;
      margin-bottom: 20px;
    }
    &-text {
      // height: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      word-break: 4;
      // line-height: 20px;
      color: #333333;
      font-size: 14px;
      font-weight: 400;
      // ::v-deep img{
      //  display: none;
      // }
    }
    &-know {
      font-size: 15px;
      font-weight: 400;
      color: #999999;
      margin-top: 10px;
      margin-bottom: 20px;
      text-align: right;
    }
    &-img {
      width: 100%;
      height: 181px;
      border-radius: 15px;
      overflow: hidden;
      > img {
        height: 100%;
      }
    }
  }
  &-nextp {
    width: 100%;
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
  }
}
.pass {
  color: #3c7cd8;
}
</style>